<template>
  <div id="api">
    <!-- 生成卡密 -->
    <el-card>
      <el-card>
        <h3>流量卡密系统</h3>
        <el-button type="primary" size="mini" @click="restcard()">刷新</el-button>
        <el-button type="primary" size="mini" @click="handleaddlog = true">生成卡密</el-button>
        &ensp;
        <el-input style="width: 170px" size="mini" v-model="searchcard.mobile" placeholder="请输入手机号查询"
          clearable></el-input>
        &ensp;
        <el-button type="primary" size="mini" @click="serchcards()">查询</el-button>
        <br />
        <br />
        <el-table :data="orderData.pageList" border style="width: 100%">
          <el-table-column align="center" prop="id" width="80px" label="ID">
          </el-table-column>
          <el-table-column align="center" width="110px" prop="mobile" label="手机号">
          </el-table-column>
          <el-table-column align="center" prop="productName" label="流量包">
          </el-table-column>
          <el-table-column align="center" prop="camille" width="110px" label="卡密">
          </el-table-column>
          <el-table-column align="center" width="90px" label="卡密状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == '0'">未使用</span>
              <span v-if="scope.row.status == '1'">已使用</span>
              <span v-if="scope.row.status == '-1'">充值中</span>
              <span v-if="scope.row.status == '-2'">已过期</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="90px" label="充值状态">
            <template slot-scope="scope">
              <span v-if="scope.row.stat == 'WAITING'">未使用</span>
              <span v-if="scope.row.stat == 'DELIVRD'">充值成功</span>
              <span v-if="scope.row.stat == 'SENDING'">充值中</span>
              <span v-if="scope.row.stat == 'REJECTED'">充值失败</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建日期">
          </el-table-column>
          <el-table-column align="center" prop="overTime" label="有效日期">
          </el-table-column>
          <el-table-column align="center" prop="params" label="备注">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit" circle
                @click="handleEdit(scope.row)">编辑</el-button>

              <el-button size="mini" type="info" icon="el-icon-message" circle
                @click="handleSMS(scope.row)">短信</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background @size-change="orderSizeChange" @current-change="orderCurrentChange"
          :page-sizes="[10, 20, 50, 100]" :page-size="10" :current-page="searchcard.pageNum"
          layout="total, sizes, prev, pager, next, jumper" :total="orderData.totalCount">
        </el-pagination>
      </el-card>
    </el-card>
    <!-- 增加弹窗 -->
    <el-dialog title="生成卡密" :close-on-click-modal="false" :visible.sync="handleaddlog" width="30%">
      <el-card style="text-align: left">
        <h3>生成卡密</h3>
        <el-tag>产品名:</el-tag>
        <br />
        <el-select clearable v-model="addCamilledata.productId" style="width: 300px; margin-top: 10px"
          placeholder="请选择充值产品">
          <el-option v-for="item in productoptions" :key="item.code" :label="item.params" :value="item.params">
          </el-option>
        </el-select>
        <br />
        <el-tag style="margin-top: 5px">充值手机号:</el-tag>
        <br />
        <el-input style="width: 300px; margin-top: 5px" :rows="3" clearable placeholder="请输入充值手机号"
          v-model="addCamilledata.mobile">
        </el-input>
        <br />
        <el-tag style="margin-top: 5px">有效日期:</el-tag>
        <br />
        <el-input-number v-model="addCamilledata.day" :precision="0" :step="1" :max="999999"></el-input-number>
        <br />
        <el-tag style="margin-top: 5px">备注:</el-tag>
        <br />
        <el-input style="width: 300px; margin-top: 5px" type="textarea" :rows="2" clearable placeholder="备注"
          v-model="addCamilledata.params">
        </el-input>
        <br />
        <el-tag style="margin-top: 5px">归属地:</el-tag>

        {{ this.mdnarea }}
        <br />
        <el-button type="danger" icon="el-icon-refresh" style="margin-top: 5px" size="medium"
          @click="rest()">清空</el-button>
        <el-button type="primary" style="margin-top: 5px" size="medium" @click="searcharea()">归属</el-button>
        <el-button type="primary" icon="el-icon-caret-top" style="margin-top: 5px" size="medium"
          @click="suborder()">生成</el-button>

        <el-button size="medium" @click="handleaddlog = false">取消</el-button>
      </el-card>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog title="修改" :close-on-click-modal="false" :visible.sync="handleEditlog" width="30%">
      手机号码：
      <el-input style="width: 170px" size="mini" v-model="updateCamilledata.mobile" placeholder="手机号"
        clearable></el-input>
      <br /><br />
      备注信息：
      <el-input style="width: 170px" size="mini" v-model="updateCamilledata.params" placeholder="手机号"
        clearable></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleEditlog = false">取 消</el-button>
        <el-button type="primary" @click="handleEditok()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发送弹窗 -->
    <el-dialog title="发送短信" :visible.sync="senddiog" width="30%">
      <span>您确定发送短信吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="senddiog = false">取 消</el-button>
        <el-button type="primary" @click="handleSMSok()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserPrice,
  addCamille,
  getCamille,
  updateCamille,
  send,
} from "@/api/order";
export default {
  data() {
    return {
      //归属
      mdnarea: "",
      //编辑
      handleEditlog: false,
      //修改
      updateCamilledata: {
        type: "流量业务",
        productName: "",
        taskid: "",
        params: "",
        username: "",
        mobile: "",
        productId: "",
        id: "",
      },
      //增加
      handleaddlog: false,
      //发送
      senddiog: false,
      taskids: "",
      //表格
      orderData: [],
      totalCount: "",
      idd: {},
      productoptions: [],
      //增加
      addCamilledata: {
        type: "流量业务",
        productName: "",
        taskid: "",
        params: "",
        username: "",
        mobile: "",
        productId: "",
        day: 1,
      },
      //搜索
      searchcard: {
        mobile: "",
        pageSize: "",
        pageNum: 1,
        totalCount: "",
      },
    };
  },
  async created() {
    let aaa = await getCamille();
    this.orderData = aaa.data;
    // console.log(aaa);
    let username = window.localStorage.getItem("username");
    this.addCamilledata.username = username;
    let data = {
      pageNum: 1,
      pageSize: 10,
      username: this.username,
    };
    let getUserPrice1 = await getUserPrice(data);
    this.productoptions = getUserPrice1.data.pageList[0].priceList;
  },
  methods: {
    //短信发送
    handleSMS(row) {
      // console.log(row);
      this.taskids = row.camille;
      this.senddiog = true;
    },
    //发送确认
    async handleSMSok() {
      let data = {
        taskid: this.taskids,
      };
      await send(data);
      this.senddiog = false;
    },

    //检查归属地
    searcharea() {
      fetch(
        `http://106.15.185.97:8901/mobile/query?mdn=${this.addCamilledata.mobile}`
      )
        .then((response) => response.json())
        .then((data) => {
          this.$message(data.message);
          this.mdnarea = data.data.area;
        });
    },
    //编辑
    handleEdit(row) {
      // console.log(row);
      this.handleEditlog = true;
      // this.updateCamilledata = row;
      this.updateCamilledata.status = 2;
      this.updateCamilledata.productName = row.productName;
      this.updateCamilledata.taskid = row.taskid;
      this.updateCamilledata.params = row.params;
      this.updateCamilledata.username = row.username;
      this.updateCamilledata.mobile = row.mobile;
      this.updateCamilledata.productId = row.productId;
      this.updateCamilledata.id = row.id;
    },
    async handleEditok() {
      await updateCamille(this.updateCamilledata);
      this.handleEditlog = false;
      this.serchcards();
    },
    // 分页查询
    async orderSizeChange(val) {
      this.searchcard.pageSize = val;
      this.serchcards();
    },
    async orderCurrentChange(val) {
      this.searchcard.pageNum = val;
      this.serchcards();
    },
    // 查询
    async serchcards() {
      let aaa = await getCamille(this.searchcard);
      this.orderData = aaa.data;
    },

    //刷新
    async restcard() {
      let aaa = await getCamille();
      this.orderData = aaa.data;
    },
    // zengjia单
    async suborder() {
      //随机数
      let times = Date.now();
      let date = new Date();
      let y = date.getFullYear() + "";
      let mo = date.getMonth() + 1 + "";
      let d = date.getDate() + "";
      let h = date.getHours() + "";
      let m = date.getMinutes() + "";
      let s = date.getSeconds() + "";
      if (mo.length == 2) {
      } else {
        mo = "0" + mo;
      }
      if (d.length == 2) {
      } else {
        d = "0" + d;
      }
      if (h.length == 2) {
      } else {
        h = "0" + h;
      }
      if (m.length == 2) {
      } else {
        m = "0" + m;
      }
      if (s.length == 2) {
      } else {
        s = "0" + s;
      }
      let datetime = `${y}${mo}${d}${h}${m}${s}`;
      let mdnum = Math.floor(Math.random() * 9 + 1);
      let str = `a${datetime}${times}${mdnum}`;
      this.addCamilledata.taskid = str;
      //数据筛选
      let data = this.productoptions.filter((item) => {
        if (item.params == this.addCamilledata.productId) {
          return item;
        }
      });
      this.idd = data[0];
      // console.log(data[0]);
      // 判断
      if (this.addCamilledata.mobile.length == 11) {
        this.addCamilledata.productId = this.idd.code;
        this.addCamilledata.productName = this.idd.mark;
        // console.log(this.addCamilledata);
        await addCamille(this.addCamilledata);
        this.serchcards();
      } else {
        this.$message("请提交正确的11位手机号");
      }
    },
    rest() {
      this.addCamilledata.mobile = "";
    },
  },
};
</script>

<style lang="scss" scoped>
#api {
  .firstol {
    li {
      font-size: 14px;
      line-height: 20px;

      span {
        color: #777777;
      }
    }
  }

  .secondol {
    li {
      div {
        font-size: 20px;
        font-weight: bold;
      }

      p {
        color: #777777;
      }
    }
  }
}
</style>